<template>
  <div>
    <h3>{{ title }}</h3>
    <h3>{{ mysub(title, 2) }}</h3>
  </div>
</template>

<script>
// 混入
// 它是vue提供一种代码的复用机制，可以把共用的代码提取到共同的文件代码块中
// 例：张三和王五两个
// 张三 a,b,c,d,e
// 王五 a d e f
// 通过上面的观察，发现 a d e 三个字母是张三和王五共同都有  可以把 a d e给提取出来
// 同理在vue中也是有很多共同的方法(methods)和数据(数据一般在后面用vuex处理),当然还有一部生命周期也是处理相同的业务
// 在vue的混入机制中，注意几点
// methods和data 它两者的混入是以组件内的优先级为高  如果混入和组件内同名，则以组件内的方法和或数据为主
// 生命周期的混入方式 则以数组的方案进行合并，并且全都执行，执行的顺序为  全局生命周期 > 局部生命周期 > 组件内生命周期
// vue中混入有两个方案 全局混入和局部混入
// 全局混入，一但定义，则项目中的所有组件都继承使用  颗粒度比较广
// 局部混入，定义时以对象定义，在组件中需要对应的配置才可以生效，只有在配置好的组件中才能生效，颗粒度小

// 模块化导入定义的混入对象
import mixin from "./mixin/mymixin";

// 组件对象
export default {
  data() {
    return {
      // 如果混入和组件中数据同名，则组件内数据优先级更高
      title: "aaaaaaa",
    };
  },
  // methods混入中的方法名和组件中的methods方法名同名则以组件内的方法名，优先级更高  面向对象中的重写
  methods: {
    mysub(str, len = 10) {
      return str.substr(0, len) + "。。。";
    },
  },
  // 生命周期
  // 生命周期的混入方案，合并，并且都执行，全局生命周期 > 局部生命周期 > 组件内生命周期
  // 混入生命周期的作用：在还没有执行到此组件时，可以处理一些业务事件，到组件中就可以直接使用  AOP
  created() {
    console.log("组件内生命周期---created");
  },
  // 配置局部混入
  mixins: [mixin],
};
</script>

<style lang='scss' scoped>
</style>